<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图库</title>
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="/css/boxicons.min.css" rel="stylesheet">
    <script src="js/anime.min.js" type="text/javascript"></script>
    <script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
    <style>
        /* 小屏幕手机端 */
        @media (min-width: 0px) and (max-width:768px) {
            .header {
                width: 100%;
                height: 55px;
            }

            .content {
                width: 100%;
                height: 130px;
                background-color: #e6e5e5;
            }

            .list {
                width: 100%;
                height: 475px;
                background-color: #e6e5e5;
            }

            .foot {
                width: 100%;
            }

        }

        /* 中等屏幕（桌面显示器，大于等于 992px） */
        @media (min-width: 768px) and (max-width:992px) {
            .header {
                width: 100%;
                height: 110px;
            }

            .nav .search input {
                width: 650px;
                height: 40px;
            }

            .nav .search button {
                width: 60px;
                height: 40px;
            }

            .content {
                width: 100%;
                height: 130px;
                background-color: #e6e5e5;
            }

            .list {
                width: 100%;
                height: 1100px;
                background-color: #e6e5e5;
            }

            ._list .list_img img {
                height: 1000px;
            }

            #tebie {
                height: 394px;
            }

            .foot {
                width: 100%;
            }
        }

        /* 大屏幕（大桌面显示器，大于等于 1200px） */
        @media (min-width: 992px) {
            .header {
                width: 100%;
                height: 85px;
                background-color: rgb(49, 49, 50);
            }
        }
    </style>
</head>

<body>
    <div>
        <div id="kai">
            <div id="kai1">
                <img src="./images/开屏1.jpg">
            </div>
            <div id="kai2" style="display: none;">
                <img src="./images/开屏2222.jpg">
            </div>
            <div id="kai3" style="display:none;">
                <img src="./images/开屏3.jpg" height="1900px">
            </div>
        </div>
        <div id="theme" style="display: none;">
            <!-- 头部 -->
            <header class="header">
                <div class="w nav">
                    <div class="logo">
                        <img src="./images/logo.png" />
                    </div>
                    <div class="search">
                        <input type="text" name="" id="" placeholder="请输入数字藏品、盲盒名称"><button>搜索</button>
                    </div>
                </div>
            </header>
            <!-- 轮播图 -->
            <div class="bannerSwiper">
                <!-- Swiper -->
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="./images/流动广告1.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./images/流动广告2.jpg" alt=""></div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <!-- 轮播图js -->
            <script src="js/swiper-bundle.min.js"></script>
            <!-- Initialize Swiper -->
            <script>
                var swiper = new Swiper(".mySwiper", {
                    spaceBetween: 30,
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: true,
                    },
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                    },
                });
            </script>
            <!-- 公告中心 -->
            <div class="content">
                <div class="_content">
                    <div class="content_gg div_float">
                        <div class=" div_left">公告中心</div>
                        <div class="content_span"><span>| 公告中心</span></div>
                        <div class=" div_right"><img src="./images/biaoqian.png" width="50px;" height="50px;" /></div>
                    </div>
                    <div class="content_cg div_float">
                        <div class="div_left">藏馆简介</div>
                        <div class="content_span"><span>| 藏馆简介</span></div>
                        <div class="div_right"><img src="./images/biaoqian.png" width="50px;" height="50px" /></div>
                    </div>
                </div>
            </div>
            <!-- 预览 -->
            <div class="list" style="margin-top: 110px;">
                <a href="./details.html?id=1">
                    <div class="_list">
                        <div class="list_img">
                            <img src="./images/夜郎王·多筒.png" />
                        </div>
                        <div class="list_info">
                            <div>
                                <span style="font-size: 17px;font-weight: 700;">夜郎王·多筒</span>
                                <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                            </div>
                            <div class="listinfo_bottom">
                                <div>
                                    <img src="./images/头像.png" />
                                    <span>w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 预览 -->
            <div class="list">
                <a href="./details.html?id=2">
                    <div class="_list">
                        <div class="list_img">
                            <img src="./images/女王1.png" />
                        </div>
                        <div class="list_info">
                            <div>
                                <span style="font-size: 17px;font-weight: 700;">女王</span>
                                <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                            </div>
                            <div class="listinfo_bottom">
                                <div>
                                    <img src="./images/头像.png" />
                                    <span>w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 预览 -->
            <div class="list">
                <a href="./details.html?id=3">
                    <div class="_list">
                        <div class="list_img">
                            <img src="./images/二大王·上峒叉星蛮王 (2).jpg" />
                        </div>
                        <div class="list_info">
                            <div>
                                <span style="font-size: 17px;font-weight: 700;">二大王·上峒叉星蛮王</span>
                                <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                            </div>
                            <div class="listinfo_bottom">
                                <div>
                                    <img src="./images/头像.png" />
                                    <span>w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 预览 -->
            <div class="list">
                <a href="./details.html?id=4">
                    <div class="_list">
                        <div class="list_img">
                            <img src="./images/三大王·中峒蛇星蛮王.jpg" />
                        </div>
                        <div class="list_info">
                            <div>
                                <span style="font-size: 17px;font-weight: 700;">三大王·中峒蛇星蛮王</span>
                                <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                            </div>
                            <div class="listinfo_bottom">
                                <div>
                                    <img src="./images/头像.png" />
                                    <span>w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 预览 -->
            <!-- 预览 -->
            <div class="list">
                <a href="./details.html?id=5">
                    <div class="_list">
                        <div class="list_img">
                            <img src="./images/四大王·下峒獐星蛮王.jpg" />
                        </div>
                        <div class="list_info">
                            <div>
                                <span style="font-size: 17px;font-weight: 700;">四大王·下峒獐星蛮王</span>
                                <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                            </div>
                            <div class="listinfo_bottom">
                                <div>
                                    <img src="./images/头像.png" />
                                    <span>w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 预览 -->
            <div class="list">
                <a href="./details.html?id=6">
                    <div class="_list">
                        <div class="list_img">
                            <img src="./images/古国遗珍.png" />
                        </div>
                        <div class="list_info">
                            <div>
                                <span style="font-size: 17px;font-weight: 700;">古国遗珍</span>
                                <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                            </div>
                            <div class="listinfo_bottom">
                                <div>
                                    <img src="./images/头像.png" />
                                    <span>w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 预览 -->
            <div class="list">
                <a href="./details.html?id=7">
                    <div class="_list">
                        <div class="list_img">
                            <img src="./images/静谧殿.png" />
                        </div>
                        <div class="list_info">
                            <div>
                                <span style="font-size: 17px;font-weight: 700;">静谧殿</span>
                                <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                            </div>
                            <div class="listinfo_bottom">
                                <div>
                                    <img src="./images/头像.png" />
                                    <span>w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 预览 -->
            <div class="list">
                <a href="./details.html?id=8">
                    <div class="_list">
                        <div class="list_img">
                            <img src="./images/青瓦之宫.png" />
                        </div>
                        <div class="list_info">
                            <div>
                                <span style="font-size: 17px;font-weight: 700;">青瓦之宫</span>
                                <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                            </div>
                            <div class="listinfo_bottom">
                                <div>
                                    <img src="./images/头像.png" />
                                    <span>w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 预览 -->
            <div class="list">
                <a href="./details.html?id=9">
                    <div class="_list">
                        <div class="list_img">
                            <img src="./images/夜郎民族图腾崇拜和权力的象征——铜虎.jpg" />
                        </div>
                        <div class="list_info">
                            <div>
                                <span style="font-size: 17px;font-weight: 700;">夜郎民族图腾崇拜和权力的象征——铜虎</span>
                                <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                            </div>
                            <div class="listinfo_bottom">
                                <div>
                                    <img src="./images/头像.png" />
                                    <span>w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 预览 -->
            <div class="list">
                <a href="./details.html?id=10">
                    <div class="_list">
                        <div class="list_img">
                            <img src="./images/龙里巫山岩画“夜郎武士”.jpg" />
                        </div>
                        <div class="list_info">
                            <div>
                                <span style="font-size: 17px;font-weight: 700;">龙里巫山岩画“夜郎武士”</span>
                                <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                            </div>
                            <div class="listinfo_bottom">
                                <div>
                                    <img src="./images/头像.png" />
                                    <span>w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 预览 -->
            <div class="list">
                <a href="./details.html?id=11">
                    <div class="_list">
                        <div class="list_img">
                            <img src="./images/盘县大洞旧石器时代遗址.jpg" />
                        </div>
                        <div class="list_info">
                            <div>
                                <span style="font-size: 17px;font-weight: 700;">盘县大洞旧石器时代遗址</span>
                                <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                            </div>
                            <div class="listinfo_bottom">
                                <div>
                                    <img src="./images/头像.png" />
                                    <span>w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 预览 -->
            <div class="list" style="height:500px">
                <a href="./details.html?id=12">
                    <div class="_list">
                        <div class="list_img">
                            <img id="tebie" src="./images/民间布艺中的夜郎神话.jpg" />
                        </div>
                        <div class="list_info">
                            <div>
                                <span style="font-size: 17px;font-weight: 700;">民间布艺中的夜郎神话</span>
                                <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                            </div>
                            <div class="listinfo_bottom">
                                <div>
                                    <img src="./images/头像.png" />
                                    <span>w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 预览 -->
            <div class="list">
                <a href="./details.html?id=13">
                    <div class="_list">
                        <div class="list_img">
                            <img src="./images/夜郎文物 陶罐.jpg" />
                        </div>
                        <div class="list_info">
                            <div>
                                <span style="font-size: 17px;font-weight: 700;">夜郎文物：陶罐</span>
                                <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                            </div>
                            <div class="listinfo_bottom">
                                <div>
                                    <img src="./images/头像.png" />
                                    <span>w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 预览 -->
            <div class="list">
                <a href="./details.html?id=14">
                    <div class="_list">
                        <div class="list_img">
                            <img src="./images/竹王面具.jpg" />
                        </div>
                        <div class="list_info">
                            <div>
                                <span style="font-size: 17px;font-weight: 700;">竹王面具</span>
                                <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                            </div>
                            <div class="listinfo_bottom">
                                <div>
                                    <img src="./images/头像.png" />
                                    <span>w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 预览 -->
            <div class="list">
                <a href="./details.html?id=15">
                    <div class="_list">
                        <div class="list_img">
                            <img src="./images/夜郎竹王像.jpg" />
                        </div>
                        <div class="list_info">
                            <div>
                                <span style="font-size: 17px;font-weight: 700;">夜郎竹王像</span>
                                <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                            </div>
                            <div class="listinfo_bottom">
                                <div>
                                    <img src="./images/头像.png" />
                                    <span>w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 底部导航栏 -->
            <div class="foot">
                <div class="navbar">
                    <!-- <div class="effect"></div> -->
                    <a href="#">
                        <button class="active">
                            <i class="iconfont icon-shouye"></i>
                            <p>首页</p>
                        </button>
                    </a>
                    <a href="./blindbox.html">
                        <button>
                            <i class="iconfont icon-manghe"></i>
                            <p>盲盒</p>
                        </button>
                    </a>
                    <a href="./home.html">
                        <button>
                            <i class="iconfont icon-wode"></i>
                            <p>我的</p>
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var updateCount = 0;
        var update = function () {
            if (updateCount == 1) {
                $('#kai1').hide();
                $('#kai2').show();
            }
            if (updateCount == 2) {
                $('#kai2').hide();
                $('#kai3').show();
            }
            if (updateCount == 3) {
                $('#kai3').hide();
                $('#theme').show();
                clearInterval(time1);
            }
            updateCount++;
        }
        var time1 = setInterval(update, 1000);
        // const effect = document.querySelector('.effect');
        // const buttons = document.querySelectorAll('.navbar button:not(.plus)');
        // buttons.forEach(button => {
        //     button.addEventListener('click', e => {
        //         const x = e.target.offsetLeft;
        //         buttons.forEach(btn => {
        //             btn.classList.remove('active');
        //         })
        //         e.target.classList.add('active');
        //         anime({
        //             targets: '.effect',
        //             left: `${x}px`,
        //             opacity: '1',
        //             duration: 600
        //         })

        //     })

        // })
    </script>
</body>

</html>